<template>
  <div class="container">
    <el-card>
      <el-form label-width="80px" :model="headerForm" ref="headerFormRef">
        <el-row type="flex">
          <el-col :span="22">
            <el-row type="flex">
              <el-form-item label="关键字">
                <el-input style="width: 217px" placeholder="根据文章标题搜索" v-model="headerForm.keyword"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="headerForm.state" clearable>
                  <el-option
                    v-for="item in status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-button type="default" size="small" style="margin-left: 10px" @click="resetHeaderForm"
                  >清除</el-button
                >
                <el-button type="primary" size="small" @click="searchArticle">搜索</el-button>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="2">
            <el-row justify="end" type="flex">
              <el-button type="success" icon="el-icon-edit" size="small" @click="addSkill">新增技巧</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <el-row style="margin-bottom: 15px">
        <el-alert :title="`数据一共 ${counts} 条`" type="info" show-icon :closable="false"> </el-alert>
      </el-row>
      <el-row>
        <el-table :data="articleList" style="width: 100%">
          <el-table-column label="序号" type="index" width="80px"></el-table-column>
          <el-table-column label="文章标题">
            <template v-slot="{ row }">
              {{ row.title
              }}<i
                class="el-icon-film"
                style="margin-left: 5px; font-size: 18px; color: #00f; cursor: pointer"
                v-if="row.videoURL"
                @click="showVideo(row.id)"
              ></i>
            </template>
          </el-table-column>
          <el-table-column label="阅读数" prop="visits"></el-table-column>
          <el-table-column label="录入人" prop="username"></el-table-column>
          <el-table-column label="录入时间">
            <template #default="{ row }">{{ formatTime(row.createTime) }}</template>
          </el-table-column>
          <el-table-column label="状态" width="100px">
            <template #default="{ row }">
              {{ row.state === 0 ? '已禁用' : '已启用' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180px">
            <template #default="{ row }">
              <el-button type="text" @click="preview(row.id)">预览</el-button>
              <el-button type="text" @click="isStatus(row.id, row.state)">{{
                row.state === 1 ? '禁用' : '启用'
              }}</el-button>
              <el-button type="text" @click="editArticle(row.id)" :disabled="row.state === 1">修改</el-button>
              <el-button type="text" @click="delArticle(row.id)" :disabled="row.state === 1">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          v-if="paginationState"
          style="margin-top: 20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="10"
          layout="prev, pager, next,sizes,jumper"
          background
          :total="counts"
        >
        </el-pagination>
      </el-row>
      <!-- 添加or编辑 -->
      <articlesAdd
        ref="articlesAddRef"
        :showDialog.sync="showDialog"
        :isEdit="isEdit"
        @addOrEdit="addOrEdit"
      ></articlesAdd>
      <!-- 预览 -->
      <articlesPreview ref="articlesPreviewRef" :previewDialog.sync="previewDialog"></articlesPreview>
      <!-- 显示视频 -->
      <div class="dialogBox" v-if="showVideoDialog">
        <div class="mask" @click="maskClick"></div>
        <i class="closeBtn el-icon-close" @click="closeBtn"></i>
        <!-- 自动播放 控制器 静音 -->

        <video class="video" autoplay controls  src="http://v.itheima.com/zycbrm2.mp4"></video>
        <!-- <video class="video" autoplay controls muted src="https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/bg1.mp4"></video> -->
        <!-- <video class="video" autoplay controls muted :src="videoURL"></video>   后台返回视频地址不行了 -->
      </div>
    </el-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { list as articleListAPI, remove as removeAPI, changeState, add, detail, update } from '@/api/hmmm/articles.js'
import { status } from '@/api/hmmm/constants.js'
import articlesAdd from '../components/articles-add.vue'
import articlesPreview from '../components/articles-preview.vue'
export default {
  data () {
    return {
      articleList: [],
      status, // 状态 启用or禁用
      counts: 0, // 总数据个数
      headerForm: {
        state: '', // 状态
        keyword: '' // 关键字
      },
      query: {
        // 查询参数
        page: 1, // 当前页
        pagesize: 10 // 一页多少条
      },
      paginationState: true, // 控制分页显示隐藏
      showDialog: false, // 对话框可见性
      isEdit: false, // 是否编辑
      previewDialog: false, // 预览对话框
      showVideoDialog: false, // 视频对话框
      videoURL: '' // 视频地址
    }
  },
  components: {
    articlesAdd,
    articlesPreview
  },
  methods: {
    // 当前页变化
    handleCurrentChange (page) {
      this.query.page = page
      this.getArticleList()
    },
    // 页码变化
    handleSizeChange (size) {
      this.query.pagesize = size
      this.getArticleList()
    },
    // 获取文章列表
    async getArticleList () {
      const { data } = await articleListAPI({ ...this.query })
      this.articleList = data.items // 文章列表
      this.counts = data.counts // 总数据条数
    },
    // 删除文章
    delArticle (id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', { type: 'warning' })
        .then(async () => {
          if (this.query.page > 1 && this.articleList.length === 1) this.query.page-- // 分页优化
          const {
            data: { success }
          } = await removeAPI({ id })
          if (success) this.$message.success('删除成功')
          this.getArticleList()
        })
        .catch(() => {})
    },
    // 禁用/启用
    async isStatus (id, state) {
      const num = state === 0 ? 1 : 0
      await changeState({ id, state: num })
      this.$message.success('操作成功')
      this.getArticleList()
    },
    // 格式化时间
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 重置头部表单
    resetHeaderForm () {
      this.headerForm = {
        state: '', // 状态
        keyword: '' // 关键字
      }
    },
    // 搜索
    async searchArticle () {
      if (this.headerForm.state === '' && this.headerForm.keyword === '') {
        this.getArticleList()
        this.paginationState = true // 默认显示分页
      } else {
        const {
          data: { items }
        } = await articleListAPI({
          ...this.query,
          ...this.headerForm
        })
        this.articleList = items
        this.paginationState = false // 隐藏分页
        this.$message.success('搜索成功')
      }
    },
    // 新增技巧
    addSkill () {
      this.showDialog = true // 显示对话框
      this.isEdit = false
    },
    // 修改文章
    editArticle (id) {
      this.showDialog = true
      this.isEdit = true
      this.$nextTick(async () => {
        const { data } = await detail({ id })
        this.$refs.articlesAddRef.formData = data // 覆盖数据 回显
      })
    },
    // 添加文章or修改文章
    async addOrEdit (formData) {
      if (this.isEdit) {
        // 编辑
        try {
          await update({ ...formData })
          this.$message.success('修改文章成功')
        } catch (error) {}
      } else {
        // 添加
        try {
          await add({ ...formData })
          this.$message.success('新增文章成功')
        } catch (error) {}
      }
      this.getArticleList() // 刷新数据
    },
    // 预览
    preview (id) {
      this.previewDialog = true
      this.$nextTick(async () => {
        // 覆盖数据 回显
        this.$refs.articlesPreviewRef.formData = this.articleList.find(item => item.id === id)
      })
    },
    // 显示video
    showVideo (id) {
      // 精确查找视频地址
      this.videoURL = this.articleList.find(item => item.id === id).videoURL
      this.showVideoDialog = true
    },
    // 关闭video
    closeBtn () {
      this.showVideoDialog = false
    },
    // 遮罩层触发
    maskClick () {
      this.showVideoDialog = false
    }
  },
  created () {
    this.getArticleList() // 调用-获取文章列表
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 15px;
  // 视频对话框样式
  .dialogBox {
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background:rgba(0,0,0,.3);
      z-index: 9999;
    }
    .closeBtn {
      position: fixed;
      top: 10%;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 50px;
      color: white;
      background:rgba(0,0,0,.4);
      border-radius: 50%;
      font-size: 26px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
      z-index: 999999;
    }
    .video{
      position: fixed;
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      width: 50% !important;
      z-index:999999 ;
    }
  }
}
</style>
